<template>
  <div class="singer-info">
    <div class="singerDetail_inner">
      <div class="singerDetail_img">
        <img :src="BASE_URL+this.$route.params.mid+'.jpg'" alt="">
      </div>
      <div class="singerDetail_info">
        <div class="info_name">{{singerName}}</div>
        <div class="info_introduction">
          <div class="detail" v-text="singerLitleDesc"></div>
          <div class="more" @click="showMore=!showMore">
            [更多]
            <div class="more_info"  v-show="showMore">
              <p class="title">歌手简介</p>
              <p v-html="singerDesc"></p>
            </div>
          </div>
        </div>
        <div class="info_total">
          <router-link tag="div"  :to="'/singerdetail/'+$route.params.mid+'/song/'+singerSong.total" class="song">
            单曲 <span>{{singerSong.total}}</span>
          </router-link>
          <router-link tag="div"  :to="'/singerdetail/'+$route.params.mid+'/album/'+singerAlbum.total" class="album">
            专辑 <span>{{singerAlbum.total}}</span>
          </router-link>
          <div></div>
          <router-link tag="div" :to="'/singerdetail/'+$route.params.mid+'/mv/'+singerMv.total" class="mv">
            MV <span>{{singerMv.total}}</span>
          </router-link>
        </div>
        <div class="singerDetail_other">
          <div class="other_play">
            <span class="iconfont icon-bofangsanjiaoxing"></span>
            <span>播放歌手热门歌曲</span>
          </div>
          <div class="other_focus">
            <span>+</span>
            <span>关注&nbsp;{{singerAttention.str}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: "SingerInfo",
        data(){
          return{
            BASE_URL:'http://y.gtimg.cn/music/photo_new/T001R300x300M000',
            showMore:false,
            singerName:'',
            singerLitleDesc:'',
            singerDesc:'',
          }
        },

        computed:{
          ...mapState(['singerInfo','singerSong','singerAlbum','singerAttention','singerMv'])
        },
        watch:{
          singerInfo(value){
            value.basic.forEach((item,index)=>{
              let itemValue='';
              if(item.key==='中文名'||item.key==='姓名'){
                this.singerName=item.value[0];
              }else{
                item.value.forEach((i,index)=>{
                  if(index!==item.value.length-1){
                    itemValue+=i+'、';
                  }else{
                    itemValue+=i;
                  }
                })
                this.singerLitleDesc+=item.key+': '+itemValue+' ';
                this.singerDesc+=item.key+': '+itemValue+'</br>';
              }
            })
            this.singerDesc+='简介: ';
            value.desc.forEach((item,index)=>{
              this.singerDesc+=item;
            })
            value.other.forEach((item,index)=>{
              let itemValue='';
              item.value.forEach((i,index)=> {
                itemValue += i + '<br/>';
              })
              this.singerDesc+=item.key+': '+itemValue;
            })
            // console.log(this.singerDesc);
          }
        }

    }
</script>

<style scoped lang="less">
  .singer-info{ width:100%;background:linear-gradient(to bottom,#f2f2f2,#fafafa);margin: 0 auto;position:relative;}
  .singer-info .singerDetail_inner{width: 1200px;margin: 0 auto;}
  .singer-info .singerDetail_img{width: 250px;display: inline-block;margin: 40px 50px 40px 0}
  .singer-info .singerDetail_img img{width: 250px;height: 250px;border-radius: 50%}
  .singer-info .singerDetail_info{position: relative;top: -34px;display: inline-block;width: 800px}
  .singer-info .singerDetail_info .info_name{font-size: 34px;}
  .singer-info .singerDetail_info .info_introduction {font-size:14px;margin: 20px 0px 20px;position: relative;}
  .singer-info .singerDetail_info .info_introduction .detail{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
  .singer-info .singerDetail_info .info_introduction .more{position: absolute;top:-2px;right: -34px;}
  .singer-info .singerDetail_info .info_introduction .more .more_info{line-height:2;position: absolute;top:40px;right: 0;border: 1px solid #dadada;box-shadow:0 0 3px #dadada;width: 580px;height: 460px;padding:30px;box-sizing: border-box;background: white;border-radius: 5px;overflow-y: scroll;z-index:1;}
  .singer-info .singerDetail_info .info_introduction .more .more_info .title{font-size: 24px}
  .singer-info .singerDetail_info .info_introduction .more:hover{color: #31c27c;cursor: pointer;}
  .singer-info .singerDetail_info .info_introduction .more:hover .more_info{color: initial;}
  .singer-info .singerDetail_info .info_total>div{display: inline-block;margin-right: 15px;margin-bottom: 20px;}
  .singer-info .singerDetail_info .info_total>div:hover{cursor: pointer;color: #31c27c;}
  .singer-info .singerDetail_info .info_total>div:nth-child(3){height: 30px;width: 2px;background: #c9c9c9;margin-bottom: 0px;}
  .singer-info .singerDetail_info .info_total>div span{font-size: 30px;margin: 0 5px;}
  .singer-info .singerDetail_info .info_total .song{margin-right: 30px;}
  .singer-info .singerDetail_info .singerDetail_other>div{display: inline-block;margin-right: 6px;padding: 12px 18px;box-sizing: border-box;}
  .singer-info .singerDetail_info .singerDetail_other .other_play{color: white;background: #31c27c;}
  .singer-info .singerDetail_info .singerDetail_other .other_play:hover{background:#2caf6f ;cursor: pointer}
  .singer-info .singerDetail_info .singerDetail_other .other_focus{border: 1px solid #c9c9c9;margin-right: 0px;}
  .singer-info .singerDetail_info .singerDetail_other .other_focus:hover{background: #ededed;cursor: pointer}

</style>
